<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { RouterLink } from 'vue-router';
import { getCategoryAPI, getNewAPI, getRecommendAPI } from '../../apis/novel';

// 热门小说
const hots = ref([])
// 强力推荐
const tops = ref([])

const categories1 = ref([])

const categories2 = ref([])

const newUpdate = ref([])

const newStore = ref([])

const getHomeInfo = async () => {
  const hotAndTop =  await getRecommendAPI()
  hots.value = hotAndTop.data['biquge:hots:']
  tops.value = hotAndTop.data['biquge:tops:']

  const category = await getCategoryAPI()
  categories1.value.push(category.data['玄幻奇幻'])
  categories1.value.push(category.data['武侠仙侠'])
  categories1.value.push(category.data['都市言情'])

  categories2.value.push(category.data['历史军事'])
  categories2.value.push(category.data['网游竞技'])
  categories2.value.push(category.data['科幻灵异'])

  
  setTimeout(async () => {
    const newAndUpdate = await getNewAPI()
    newUpdate.value = newAndUpdate.data['biquge:update:']
    newStore.value = newAndUpdate.data['biquge:new:']
  }, 100);
}

onMounted( () => {
  document.title = '笔趣阁_免费小说阅读'
  getHomeInfo()
})
</script>

<template>
  <div class="w-full min-h-screen">
    <!-- 推荐栏  -->
    <div class="flex w-full mt-3 ">
      <div class="grid w-3/4 grid-cols-2 gap-0 px-1 py-2 border-2 border-blue-300 lg:mr-3 sm:w-full sm:mr-0 bg-color-s1">
        <div
          v-for="hot in hots"
          :key="hot.id"
          class="flex w-full px-1"
        >
          <div style="width: 33%;" class="flex items-center w-auto h-auto px-1">
            <RouterLink :to="{ path: '/book/' + hot.id }">
              <img
                :src="hot.picture"
                :alt="hot.name"
                class="h-auto scale-105 border-2 w-44 border-blue-30 min-w-44 max-w-44"
              >
            </RouterLink>
          </div>
          <dl style="width: 67%;"  class="flex flex-col flex-wrap w-auto px-2 pt-1">
            <dt class="flex items-center justify-between px-1 border-b border-blue-200 ">

              <RouterLink :to="{ path: '/book/' + hot.id }">
                <div class="text-base font-semibold text-gray-600 ">
                  <div class="w-32 nowrap ">
                    {{ hot.name }}
                  </div>
                </div>
              </RouterLink>
              <span class="font-semibold text-gray-400 lg:text-sm sm:text-xs overflow-clip">
                <div class="text-right w-14 nowrap ">
                  {{ hot.author }}
                </div>
              </span>
            </dt>
            <dd class="pt-1 text-sm text-gray-400">
              <div style="width: 100%;" class="overflow-hidden min-w-56 h-36 ">
                {{ hot.simple }}
              </div>
            </dd>
          </dl>
        </div>
      </div>
      <div class="flex flex-col w-1/4 min-h-full sm:hidden lg:inline-block">
        <div class="border-2 border-blue-300">
          <h2 class="flex items-center w-full h-10 px-2 text-sm text-gray-700 bg-color-s2">强力推荐</h2>
          <ul class="px-2 bg-color-s1 ">
            <li
              class="py-1.5 flex hover:bg-slate-100 border-b border-gray-300 opacity-50 text-gray-5"
              v-for="top in tops"
              :key="top.id"
            ><span class="w-12">[{{ top.type }}]</span>
              <span class="pl-1">
                <RouterLink :to="{ path: '/book/' + top.id }">
                  <div class="w-44 nowrap">
                    {{ top.name }}
                  </div>
                </RouterLink>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 分类栏  -->
    <div>
      <!-- 分类栏1  -->
      <div class="grid grid-cols-3 mt-3 border-2 border-blue-300 bg-color-s1">
        <div
          v-for="item in categories1"
          :key="item.id"
          class="border-r border-gray-200 last:border-r-0"
        >
          <h2 class="flex items-center h-10 pl-3 border-b border-blue-100 bg-color-s2">{{ item.type }}</h2>
          <div class="flex px-2 py-3 text-gray-600">
            <div class="flex items-center w-24 h-auto mx-1 lg:inline-block md:inline-block sm:hidden">
              <RouterLink :to="{ path: '/book/' + item.id }">
                <img
                  :src="item.imgUrl"
                  :alt="item.name"
                  class="w-20 h-auto border border-blue-400 "
                >
              </RouterLink>
            </div>
            <dl class="w-full px-1 text-base">
              <dt class="text-sm font-semibold">
                <RouterLink :to="{ path: '/book/' + item.id }">
                  {{ item.name }}
                </RouterLink>
              </dt>
              <dd class="flex flex-wrap text-sm text-gray-500">{{ item.simple }}</dd>
            </dl>
          </div>
          <ul class="flex flex-col px-2">
            <li
              v-for="one in item.list"
              :key="one.id"
              class="flex items-center justify-between border-b border-gray-300 opacity-50 hover:bg-slate-100 text-gray-5"
            >
              <div class="flex items-center py-1 nowrap">
                <span class="s1">[{{ one.type }}]</span>
                <span class="s2">
                  <RouterLink
                    :to="{ path: '/book/' + one.id }"
                    class="px-1 text-blue-900 opacity-100 "
                  >
                    {{ one.name }}
                  </RouterLink>
                </span>
              </div>
              <span class="lg:inline-block md:inline-block sm:hidden">{{ one.author }}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 分类栏2  -->
      <div class="grid grid-cols-3 mt-3 border-2 border-blue-300 bg-color-s1">
        <div
          v-for="item in categories2"
          :key="item.id"
          class="block border-r border-gray-200 last:border-r-0"
        >
          <h2 class="flex items-center h-10 pl-3 border-b border-blue-100 bg-color-s2">{{ item.type }}</h2>
          <div class="flex px-2 py-3 text-gray-600">
            <div class="flex items-center w-24 h-auto mx-1 lg:inline-block md:inline-block sm:hidden">
              <RouterLink :to="{ path: '/book/' + item.id }">
                <img
                  :src="item.imgUrl"
                  :alt="item.name"
                  class="w-20 border border-blue-400"
                >
              </RouterLink>
            </div>
            <dl class="w-full px-1 text-base">
              <dt class="text-sm font-semibold ">
                <RouterLink :to="{ path: '/book/' + item.id }">
                  {{ item.name }}
                </RouterLink>
              </dt>
              <dd class="flex flex-wrap text-sm text-gray-500">{{ item.simple }}</dd>
            </dl>
          </div>
          <ul class="flex flex-col px-2">
            <li
              v-for="one in item.list"
              :key="one.id"
              class="flex items-center justify-between border-b border-gray-300 opacity-50 hover:bg-slate-100 text-gray-5"
            >
              <div class="flex items-center py-1 nowrap">
                <span class="">
                  [{{ one.type }}]</span>
                  <span class="s2">
                  <RouterLink
                    :to="{ path: '/book/' + one.id }"
                    class="px-1 text-blue-900 opacity-100"
                  >
                    {{ one.name }}
                  </RouterLink>
                </span>
              </div>
              <span class="lg:inline-block md:inline-block sm:hidden">{{ one.author }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 最新栏  -->
    <div>
      <div class="flex w-full mt-3 ">
        <div class="w-3/4 mr-3 border-2 border-blue-300 l bd">
          <h2 class="flex items-center h-10 pl-3 border-b border-blue-100 bg-color-s2">最近更新小说列表</h2>
          <ul>
            <li
              v-for="item in newUpdate"
              :key="item.id"
              class="relative flex items-center mx-2 text-sm border-b border-gray-300 h-9"
            ><span class="mr-5 text-gray-600 lg:inline-block md:inline-block sm:hidden max-w-14 ">[{{ item.type }}]</span>
              <span class="w-40 text-blue-900 s2 max-w-40 opacity-70 nowrap">
                <RouterLink
                  :to="{ path: '/book/' + item.id }"
                  class="border-b border-collapse nowrap hover:border-blue-300"
                >
                  {{ item.name }}
                </RouterLink>
              </span>
              <span class="w-auto text-blue-900 s3 opacity-70 s2">
                <RouterLink
                  :to="{ path: '/book/' + item.id }"
                  class="border-b border-collapse hover:border-blue-300"
                >
                  {{ item.newChapter }}
                </RouterLink>
              </span>
              <div class="absolute text-gray-400 right-3 lg:inline-block md:inline-block sm:hidden">
                <span class="w-40 pr-2 s4 max-w-16">{{ item.author }}</span>
                <span class="w-40 s5 max-w-14">{{ item.updateTime?.substring(5, 10) }}</span>
              </div>
            </li>
          </ul>
        </div>

        <div class="w-1/4 border-2 border-blue-300 r bd">
          <h2 class="flex items-center h-10 pl-3 border-b border-blue-100 bg-color-s2">最新入库小说</h2>
          <ul>
            <li
              v-for="item in newStore"
              :key="item.id"
              class="flex items-center justify-between mx-2 border-b border-gray-300 h-9"
            >
              <div class="text-sm">
                <span class="mr-1 text-gray-600 lg:inline-block md:inline-block sm:hidden ">[{{ item.type }}]</span>
                <span class="text-blue-900 border-b border-collapse nowrap opacity-70 s2 hover:border-blue-300">
                  <RouterLink :to="{ path: '/book/' + item.id }">
                    {{ item.name }}
                  </RouterLink>
                </span>
              </div>
              <span
                v-show="item.name.length < 10"
                class="text-sm text-gray-700 nowrap lg:inline-block md:inline-block sm:hidden"
              >{{ item.author }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>


</template>

<style scoped lang='scss'>
.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>